<script setup lang="ts">
// import logo from '@/assets/logo.png'
import logo from '@/assets/logo.svg'
import { user } from '@/api/user'
import { getTimeState } from '@/utils/dateFormat'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import { useUserInfoStoreWithOut } from '@/store/storage/userInfoStore'
import { transformI18n } from '@/plugins/i18n'
import { emailRule } from '@/utils/formValidate'
import { useLoginStoreWithOut } from '@/store/storage/loginStore'
import { throttle } from 'lodash-es'
const router = useRouter()
const route = useRoute()
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)
const userInfoStore = useUserInfoStoreWithOut()
const { userInfo } = storeToRefs(userInfoStore)
const loginStore = useLoginStoreWithOut()
const { accountInfo } = storeToRefs(loginStore)

const loginFormRef = ref(null)
const registerFormRef = ref(null)
const recoverFormRef = ref(null)

const newPasswordRule = (rule, value, callback) => {
  const reg = /^[a-zA-Z0-9_\-\.]{6,20}$/
  if (!value) {
    callback(new Error(transformI18n('verifies.' + '请输入密码！', true)))
  } else if (!reg.test(value)) {
    callback(new Error(transformI18n('verifies.' + '密码格式错误！', true)))
  } else {
    if (initInfo.value.recover.form.passwordConfirm !== '') {
      if (!recoverFormRef.value) return
      recoverFormRef.value.validateField('passwordConfirm', () => null)
    }
    callback()
  }
}
const newPasswordConfirmRule = (rule, value, callback) => {
  const reg = /^[a-zA-Z0-9_\-\.]{6,20}$/
  if (!value) {
    callback(new Error(transformI18n('verifies.' + '请再次输入密码！', true)))
  } else if (!reg.test(value)) {
    callback(new Error(transformI18n('verifies.' + '密码格式错误！', true)))
  } else {
    if (initInfo.value.recover.form.password !== value) {
      callback(new Error(transformI18n('verifies.' + '两次密码输入不一致！', true)))
    }
    callback()
  }
}

const passwordRule = (rule, value, callback) => {
  const reg = /^[a-zA-Z0-9_\-\.]{6,20}$/
  if (!value) {
    callback(new Error(transformI18n('verifies.' + '请输入密码！', true)))
  } else if (!reg.test(value)) {
    callback(new Error(transformI18n('verifies.' + '密码格式错误！', true)))
  } else {
    if (initInfo.value.register.form.passwordConfirm !== '') {
      if (!registerFormRef.value) return
      registerFormRef.value.validateField('passwordConfirm', () => null)
    }
    callback()
  }
}
const passwordConfirmRule = (rule, value, callback) => {
  const reg = /^[a-zA-Z0-9_\-\.]{6,20}$/
  if (!value) {
    callback(new Error(transformI18n('verifies.' + '请再次输入密码！', true)))
  } else if (!reg.test(value)) {
    callback(new Error(transformI18n('verifies.' + '密码格式错误！', true)))
  } else {
    if (initInfo.value.register.form.password !== value) {
      callback(new Error(transformI18n('verifies.' + '两次密码输入不一致！', true)))
    }
    callback()
  }
}

const initInfo = ref({
  type: 'login',
  login: {
    form: {
      account: 'admin',
      password: '123456',
      isRemember: true
    },
    rules: {
      account: [{ required: true, message: transformI18n('verifies.' + '请输入账号！', true), trigger: 'blur' }],
      password: [{ required: true, message: transformI18n('verifies.' + '请输入密码！', true), trigger: 'blur' }]
    }
  },
  register: {
    countdown: 0,
    timer: null,
    isCountdown: false,
    form: {
      account: '',
      password: '',
      passwordConfirm: '',
      code: '',
      invitationCode: ''
    },
    rules: {
      account: [{ required: true, validator: emailRule, trigger: 'blur' }],
      password: [{ required: true, validator: passwordRule, trigger: 'blur' }],
      passwordConfirm: [{ required: true, validator: passwordConfirmRule, trigger: 'blur' }],
      code: [{ required: true, message: transformI18n('verifies.' + '请输入验证码！', true), trigger: 'blur' }],
      invitationCode: [{ required: true, message: transformI18n('verifies.' + '请输入邀请码！', true), trigger: 'blur' }]
    }
  },
  recover: {
    countdown: 0,
    timer: null,
    isCountdown: false,
    form: {
      account: '',
      password: '',
      passwordConfirm: '',
      code: ''
    },
    rules: {
      account: [{ required: true, validator: emailRule, trigger: 'blur' }],
      password: [{ required: true, validator: newPasswordRule, trigger: 'blur' }],
      passwordConfirm: [{ required: true, validator: newPasswordConfirmRule, trigger: 'blur' }],
      code: [{ required: true, message: transformI18n('verifies.' + '请输入验证码！', true), trigger: 'blur' }]
    }
  }
})

// 登录点击事件
const onLogin = () => {
  if (!loginFormRef.value) return false
  if (initInfo.value.login.form.account !== '' && initInfo.value.login.form.password !== '') {
    loginFormRef.value.validate((valid) => {
      if (valid) {
        user.login(initInfo.value.login.form, { config: { mockEnable: true } }).then((res: any) => {
          if (res && res.status) {
            const { accessToken, refreshToken, data } = res
            data.accessToken = accessToken
            data.refreshToken = refreshToken
            userInfo.value = data
            if (initInfo.value.login.form.isRemember) {
              const result = {
                account: initInfo.value.login.form.account,
                password: initInfo.value.login.form.password,
                isRemember: initInfo.value.login.form.isRemember
              }
              accountInfo.value = result
              loginStore.setRememberPasswordCache()
            }
            userInfoStore.setUserInfoCache()
            ElNotification({
              title: transformI18n('text.' + getTimeState(), true),
              message: transformI18n('successes.successLoginInfo', true),
              type: 'success'
            })
            systemConfig.value.isLogin = true
            systemConfig.value.isLockScreen = false
            systemConfigStore.setSystemConfigCache()
            // 如果用户真正访问的页面需要登录权限，在跳转到登陆页用户登陆后，需重新跳转到用户真正要访问的页面
            if (route.query.redirect) {
              router.push({ path: route.query.redirect as string })
            } else {
              router.push({ path: '/' })
            }
          }
        })
      }
    })
  }
}

const getRegisterCode = () => {
  if (!registerFormRef.value) return false
  const countdownTime = new Date().getTime() + 1000 * 60
  loginStore.setRegisterCountdownCache(countdownTime)
  registerFormRef.value.validateField(['account'], valid => {
    if (valid) {
      user.code(initInfo.value.register.form, { config: { mockEnable: true } }).then((res: any) => {
        if (res && res.status) {
          registerTimerCountdown(countdownTime)
        } else {
          loginStore.removeRegisterCountdownCache()
        }
      })
    }
  })
}

// 注册事件
const onRegister = () => {
  if (!registerFormRef.value) return false
  if (initInfo.value.register.form.account !== '' && initInfo.value.register.form.password !== '' && initInfo.value.register.form.passwordConfirm !== '' && initInfo.value.register.form.code !== '' && initInfo.value.register.form.invitationCode !== '') {
    registerFormRef.value.validate((valid) => {
      if (valid) {
        user.register(initInfo.value.register.form, { config: { mockEnable: true } }).then((res: any) => {
          if (res && res.status) {
            registerFormRef.value.resetFields()
            initInfo.value.type = 'login'
            ElNotification({
              title: transformI18n('text.注册成功', true),
              message: transformI18n('text.请妥善保管好个人账号，切勿借与他人，并定期修改密码。', true),
              type: 'success',
              duration: 0
            })
          }
        })
      }
    })
  }
}

const changeType = (v) => {
  initInfo.value.type = v
}

const registerHandle = throttle(onRegister, 60 * 1000)

const getRecoverCode = () => {
  if (!recoverFormRef.value) return false
  const countdownTime = new Date().getTime() + 1000 * 60
  loginStore.setRecoverCountdownCache(countdownTime)
  recoverFormRef.value.validateField(['account'], valid => {
    if (valid) {
      user.code(initInfo.value.recover.form, { config: { mockEnable: true } }).then((res: any) => {
        if (res && res.status) {
          recoverTimerCountdown(countdownTime)
        } else {
          loginStore.removeRecoverCountdownCache()
        }
      })
    }
  })
}

const confirmRecover = () => {
  if (!recoverFormRef.value) return false
  if (initInfo.value.recover.form.account !== '' && initInfo.value.recover.form.password !== '' && initInfo.value.recover.form.passwordConfirm !== '' && initInfo.value.recover.form.code !== '') {
    recoverFormRef.value.validate((valid) => {
      if (valid) {
        user.recover(initInfo.value.recover.form, { config: { mockEnable: true } }).then((res: any) => {
          if (res && res.status) {
            recoverFormRef.value.resetFields()
            initInfo.value.type = 'login'
            ElNotification({
              title: transformI18n('text.账号已成功找回', true),
              dangerouslyUseHTMLString: true,
              message: '<div class="recover-notification"><div class="item-line"><span>' + transformI18n('text.账号：', true) + '</span><strong>' + res.data.account + '</strong></div><div class="item-line"><span>' + transformI18n('text.密码：', true) + '</span><strong>' + res.data.password + '</strong></div><p>' + transformI18n('text.请妥善保管好个人账号，切勿借与他人，并定期修改密码。', true) + '</p></div>',
              type: 'success',
              duration: 0
            })
          }
        })
      }
    })
  }
}

const registerTimerCountdown = (time) => {
  if (!initInfo.value.register.timer) {
    initInfo.value.register.countdown = Math.ceil((JSON.parse(time) - new Date().getTime()) / 1000)
    initInfo.value.register.isCountdown = true
    initInfo.value.register.timer = setInterval(() => {
      if (initInfo.value.register.countdown > 0) {
        initInfo.value.register.countdown--
      } else {
        initInfo.value.register.isCountdown = false
        clearInterval(initInfo.value.register.timer)
        initInfo.value.register.timer = null
        loginStore.removeRegisterCountdownCache()
      }
    }, 1000)
  }
}

const recoverTimerCountdown = (time) => {
  if (!initInfo.value.recover.timer) {
    initInfo.value.recover.countdown = Math.ceil((JSON.parse(time) - new Date().getTime()) / 1000)
    initInfo.value.recover.isCountdown = true
    initInfo.value.recover.timer = setInterval(() => {
      if (initInfo.value.recover.countdown > 0) {
        initInfo.value.recover.countdown--
      } else {
        initInfo.value.recover.isCountdown = false
        clearInterval(initInfo.value.recover.timer)
        initInfo.value.recover.timer = null
        loginStore.removeRecoverCountdownCache()
      }
    }, 1000)
  }
}

onMounted(() => {
  if (accountInfo.value) {
    initInfo.value.login.form.account = accountInfo.value.account
    initInfo.value.login.form.password = accountInfo.value.password
    initInfo.value.login.form.isRemember = accountInfo.value.isRemember
  }
  if (loginStore.getRecoverCountdownCache()) {
    const endTime = loginStore.getRecoverCountdownCache()
    recoverTimerCountdown(endTime)
  }
  if (loginStore.getRegisterCountdownCache()) {
    const endTime = loginStore.getRegisterCountdownCache()
    registerTimerCountdown(endTime)
  }
})
</script>

<template>
  <div class="login-container">
    <div class="login-box">
      <el-icon class="logo-svg" v-motion :initial="{ opacity: 0, y: 100 }" :enter="{ opacity: 1, y: 0, transition: { delay: 100 } }">
        <logo />
      </el-icon>
      <!-- <el-image :src="logo" class="logo-image" v-motion :initial="{ opacity: 0, y: 100 }" :enter="{ opacity: 1, y: 0, transition: { delay: 50 } }"></el-image> -->
      <h2 v-motion :initial="{ opacity: 0, y: 100 }" :enter="{ opacity: 1, y: 0, transition: { delay: 200 } }">
        {{ $t("settings.settingProjectTitle") }}
      </h2>
      <el-form v-if="initInfo.type === 'login'" ref="loginFormRef" class="login-form" :model="initInfo.login.form" :rules="initInfo.login.rules">
        <el-form-item prop="account">
          <div class="input-group" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 300 } }">
            <div class="item-icon">
              <el-icon><svg-icon icon="ep:message"></svg-icon></el-icon>
            </div>
            <div class="item-input">
              <el-input type="text" class="input" v-model="initInfo.login.form.account" size="large" clearable :placeholder="$t('placeholders.邮箱')" @keyup.enter="onLogin" />
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div class="input-group" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }">
            <div class="item-icon">
              <el-icon><svg-icon icon="ep:lock"></svg-icon></el-icon>
            </div>
            <div class="item-input">
              <el-input type="password" class="input" v-model="initInfo.login.form.password" size="large" show-password clearable :placeholder="$t('placeholders.登录密码')" @keyup.enter="onLogin" />
            </div>
          </div>
        </el-form-item>
        <div class="remember-password" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 500 } }">
          <el-checkbox v-model="initInfo.login.form.isRemember" :label="$t('buttons.记住密码')" size="large" />
        </div>
        <el-button class="btn-login" :class="initInfo.login.form.account !== '' && initInfo.login.form.password !== '' ? 'is-active' : ''" size="large" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 600 } }" @click="onLogin">
          {{ $t("buttons.buttonLogin") }}
        </el-button>
        <div class="other-button" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 700 } }">
          <div class="left">
            <el-link @click="changeType('register')">{{ $t("buttons.注册") }}</el-link>
          </div>
          <div class="right">
            <span>{{ $t('text.忘记密码了？') }}</span>
            <el-link @click="changeType('recover')">{{ $t("buttons.找回") }}</el-link>
          </div>
        </div>
      </el-form>
      <el-form v-else-if="initInfo.type === 'recover'" ref="recoverFormRef" class="login-form" :model="initInfo.recover.form" :rules="initInfo.recover.rules">
        <el-form-item prop="account">
          <div class="input-group" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 300 } }">
            <div class="item-icon">
              <el-icon><svg-icon icon="ep:message"></svg-icon></el-icon>
            </div>
            <div class="item-input">
              <el-input type="text" class="input" v-model="initInfo.recover.form.account" clearable :placeholder="$t('placeholders.邮箱')" />
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <el-popover placement="right" width="220" trigger="hover" :content="$t('text.passwordRule')" popper-style="font-size: 12px;">
            <template #reference>
              <div class="input-group" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }">
                <div class="item-icon">
                  <el-icon><svg-icon icon="ep:unlock"></svg-icon></el-icon>
                </div>
                <div class="item-input">
                  <el-input type="password" class="input" v-model="initInfo.recover.form.password" show-password clearable :placeholder="$t('placeholders.新密码')" />
                </div>
              </div>
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item prop="passwordConfirm">
          <el-popover placement="right" width="220" trigger="hover" :content="$t('text.passwordRule')" popper-style="font-size: 12px;">
            <template #reference>
              <div class="input-group" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 500 } }">
                <div class="item-icon">
                  <el-icon><svg-icon icon="ep:lock"></svg-icon></el-icon>
                </div>
                <div class="item-input">
                  <el-input type="password" class="input" v-model="initInfo.recover.form.passwordConfirm" show-password clearable :placeholder="$t('placeholders.确认密码')" />
                </div>
              </div>
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item prop="code">
          <div class="input-wrap" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 600 } }">
            <div class="input-group">
              <div class="item-icon">
                <el-icon><svg-icon icon="ri:shield-line"></svg-icon></el-icon>
              </div>
              <div class="item-input">
                <el-input type="text" class="input" v-model="initInfo.recover.form.code" clearable :placeholder="$t('placeholders.验证码')" />
              </div>
            </div>
            <el-button v-if="!initInfo.recover.isCountdown" class="btn-code" @click="getRecoverCode" type="primary" plain>{{ $t("buttons.获取验证码") }}</el-button>
            <el-button v-else class="btn-code" type="primary" plain disabled>
              {{ transformI18n('buttons.{0}秒后重试', true,
                [initInfo.recover.countdown]) }}
            </el-button>
          </div>
        </el-form-item>
        <el-button
          class="btn-recover"
          v-motion
          :class="initInfo.recover.form.account !== '' && initInfo.recover.form.password !== '' && initInfo.recover.form.passwordConfirm !== '' && initInfo.recover.form.code !== '' ? 'is-active' : ''"
          :initial="{ opacity: 0, y: 10 }"
          :enter="{ opacity: 1, y: 0, transition: { delay: 700 } }"
          @click="confirmRecover">
          {{ $t("buttons.确认找回")
          }}
        </el-button>
        <div class="other-button" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 800 } }">
          <div class="left">
            <el-link @click="changeType('login')">{{ $t("buttons.buttonLogin") }}</el-link>
          </div>
        </div>
      </el-form>
      <el-form v-else ref="registerFormRef" class="login-form" :model="initInfo.register.form" :rules="initInfo.register.rules">
        <el-form-item prop="account">
          <div class="input-group" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 300 } }">
            <div class="item-icon">
              <el-icon><svg-icon icon="ep:message"></svg-icon></el-icon>
            </div>
            <div class="item-input">
              <el-input type="text" class="input" v-model="initInfo.register.form.account" clearable :placeholder="$t('placeholders.邮箱')" />
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <el-popover placement="right" width="220" trigger="hover" :content="$t('text.passwordRule')" popper-style="font-size: 12px;">
            <template #reference>
              <div class="input-group" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 400 } }">
                <div class="item-icon">
                  <el-icon><svg-icon icon="ep:unlock"></svg-icon></el-icon>
                </div>
                <div class="item-input">
                  <el-input type="password" class="input" v-model="initInfo.register.form.password" show-password clearable :placeholder="$t('placeholders.登录密码')" />
                </div>
              </div>
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item prop="passwordConfirm">
          <el-popover placement="right" width="220" trigger="hover" :content="$t('text.passwordRule')" popper-style="font-size: 12px;">
            <template #reference>
              <div class="input-group" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 500 } }">
                <div class="item-icon">
                  <el-icon><svg-icon icon="ep:lock"></svg-icon></el-icon>
                </div>
                <div class="item-input">
                  <el-input type="password" class="input" v-model="initInfo.register.form.passwordConfirm" show-password clearable :placeholder="$t('placeholders.确认密码')" />
                </div>
              </div>
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item prop="code">
          <div class="input-wrap" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 600 } }">
            <div class="input-group">
              <div class="item-icon">
                <el-icon><svg-icon icon="ri:shield-line"></svg-icon></el-icon>
              </div>
              <div class="item-input">
                <el-input type="text" class="input" v-model="initInfo.register.form.code" clearable :placeholder="$t('placeholders.验证码')" />
              </div>
            </div>
            <el-button v-if="!initInfo.register.isCountdown" class="btn-code" @click="getRegisterCode" type="primary" plain>{{ $t("buttons.获取验证码") }}</el-button>
            <el-button v-else class="btn-code" type="primary" plain disabled>
              {{ transformI18n('buttons.{0}秒后重试', true,
                [initInfo.register.countdown]) }}
            </el-button>
          </div>
        </el-form-item>
        <el-form-item prop="invitationCode">
          <div class="input-group" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 700 } }">
            <div class="item-icon">
              <el-icon><svg-icon icon="ep:message"></svg-icon></el-icon>
            </div>
            <div class="item-input">
              <el-input type="text" class="input" v-model="initInfo.register.form.invitationCode" clearable :placeholder="$t('placeholders.邀请码')" />
            </div>
          </div>
        </el-form-item>
        <el-button
          class="btn-register"
          :class="initInfo.register.form.account !== '' && initInfo.register.form.password !== '' && initInfo.register.form.passwordConfirm !== '' && initInfo.register.form.code !== '' && initInfo.register.form.invitationCode !== '' ? 'is-active' : ''"
          v-motion
          :initial="{ opacity: 0, y: 10 }"
          :enter="{ opacity: 1, y: 0, transition: { delay: 800 } }"
          @click="registerHandle">
          {{ $t("buttons.注册")
          }}
        </el-button>
        <div class="other-button" v-motion :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0, transition: { delay: 900 } }">
          <div class="left">
            <el-link @click="changeType('login')">{{ $t("buttons.buttonLogin") }}</el-link>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
  padding: var(--el-space);
  overflow-y: hidden;
  background-color: rgb(13, 16, 20);

  .header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    width: 100%;

    .left {
      flex: 1;
    }

    .right {
      padding: 12px;

      .vk-globalization {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 32px;
        padding: 0 10px;
        color: #ffffff;
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
}

.login-box {
  display: flex;
  flex: 0 0 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  .logo-svg {
    color: var(--el-color-primary);
    font-size: 140px;
  }

  .logo-image {
    width: 18%;
    margin: 0 auto;
  }

  h2 {
    margin: 20px 0 0;
    color: #ffffff;
    font-weight: bold;
    font-size: 48px;
    line-height: 1;
    text-align: center;
    text-transform: capitalize;
  }

  .login-form {
    width: 520px;

    .remember-password {
      display: flex;
      justify-content: flex-start;
      margin-top: 30px;
    }

    .title {
      display: flex;
      align-items: center;

      .el-icon {
        width: 30px;
        height: 30px;
        font-size: 20px !important;
        cursor: pointer;
      }
    }

    :deep(.el-form-item__content) {
      >.el-form-item__error {
        margin-top: 1px;
      }
    }

    .el-form-item {
      margin: 36px 0 0;

      &.is-error {
        :deep(.el-input__wrapper) {
          box-shadow: none !important;
        }
      }
    }

    >p {
      color: #ffffff;
      font-size: 20px;
      text-align: left;
    }

    .el-input {
      padding: 0;
      background: none;
      border: none;

      :deep(.el-input__wrapper) {
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;

        .el-input__inner {
          padding: 0;
          color: #ffffff;
          font-size: 14px;
          background: none;
          border: none;
        }
      }
    }
  }
}

.input-wrap {
  display: flex;
  flex: 1;

  .input-group {
    margin: 0;
  }

  .item-img {
    display: flex;
    align-items: center;
    height: 42px;
    margin-left: 16px;

    .el-image {
      height: 32px;
    }
  }

  .btn-recover {
    width: auto;
    margin-top: 1px;
    margin-bottom: 1px;
    margin-left: 20px;
    font-size: 14px;
  }
}

.input-group {
  position: relative;
  display: flex;
  flex: 1;
  padding: 10px 0;
  color: #454545;
  background: #22252f !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;

  &.focus {

    &::before,
    &::after {
      width: 50%;
    }

    .item-icon {
      color: var(--el-color-primary);
    }

    .item-input {
      h5 {
        top: -5px;
        font-size: 15px;
      }
    }
  }

  .item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    color: #d9d9d9;
    font-size: 18px;
  }

  .item-input {
    position: relative;
    flex: 1;
    height: 30px;
    padding-right: 15px;

    h5 {
      position: absolute;
      top: 50%;
      left: 10px;
      margin: 0;
      padding: 0;
      color: #d9d9d9;
      font-weight: normal;
      font-size: 16px;
      transform: translateY(-50%);
      transition: 0.3s;
    }

    .el-select {
      display: flex;
      line-height: 30px;

      :deep(.el-input) {
        &.is-focus {
          .el-input__wrapper {
            box-shadow: none !important;
          }
        }
      }

      :deep(.el-input__wrapper) {
        padding: 0;

        &.is-focus {
          box-shadow: none !important;
        }
      }

      :deep(.select-trigger) {
        display: flex;
        flex: 1;

        .el-input__wrapper {
          background-color: transparent;
          box-shadow: none;

          .el-input__inner {
            height: 28px;
            color: #ffffff;
            line-height: 28px;
          }
        }
      }
    }

    .input {
      display: flex;
      width: 100%;
      height: 100%;
      padding: 4px 0;
      color: #ffffff;
      font-size: 16px;
      background: none;
      border: none;
      outline: none;

      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        transition: color 99999s ease-out 99999s, background-color 99999s ease-out 99999s;
      }
    }
  }
}

.btn-code {
  display: block;
  min-width: 150px;
  height: 52px;
  margin-left: 20px;
  font-size: 16px;
  text-transform: capitalize;
  outline: none;
  transition: 0.5s;

  &.is-disabled {
    text-transform: none;
  }
}

.btn-login,
.btn-recover,
.btn-register {
  display: block;
  width: 100%;
  height: 52px;
  margin-bottom: 8px;
  color: var(--el-color-white);
  font-size: 20px;
  text-transform: capitalize;
  background-color: rgba(209, 213, 219, 1);
  border: none;
  border-radius: 4px;
  outline: none;
  cursor: default;
  transition: 0.5s;

  &.is-active {
    background: linear-gradient(to right, #f7d8a7, #f4cc8c, #f7d8a7);
    background-size: 200%;
    cursor: pointer;

    &:hover {
      background-position: right;
    }
  }
}

.btn-recover,
.btn-register {
  margin-top: 36px;
}

.other-button {
  display: flex;

  .left,
  .right {
    display: flex;
    flex: 1;
    align-items: center;
  }

  .right {
    justify-content: flex-end;
    font-size: 0;
    line-height: 0;

    .el-link {
      position: relative;
      align-items: center;
      margin-left: 5px;

      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 1px;
        background-color: #ffffff;
        content: '';
      }
    }

    span {
      color: #ffffff;
      font-size: 14px;
    }
  }

  .el-link {
    :deep(.el-link__inner) {
      color: #ffffff;
    }

    &:hover {
      &::before {
        background-color: transparent;
      }

      :deep(.el-link__inner) {
        color: var(--el-color-primary);
      }
    }
  }
}

:deep(.el-checkbox__label) {
  color: #ffffff;
}
</style>
